<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可编辑图片</title>
		<link rel="stylesheet" href="./base.css"/>
		<script src="./vue.js"></script>
		<style>
			.main{
				width: 400px;
				height: 600px;
				border: 1px solid #000;
			}
			.div1{
				position: absolute;
				background: url(./img/cursor.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.div2{
				position: absolute;
				background: url(./img/cursortrail.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.div3{
				position: absolute;
				border: 1px solid #55ffff;
			}
			.yuan{
				position: absolute;
				border-radius: 50%;
				border: 1px solid #000000;
				width: 10px;
				height: 10px;
				background-color: #fff;
			}
			.yuan:hover{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="main">
				<div class="div3" style="left: 0;top: 0;" v-show="switchBorder"></div>
				<div class="div2" v-drag style="left: 0;top: 0;width: 100px;height: 50px;"></div>
				<div class="div1" v-drag style="left: 0;top: 0;width: 300px;height: 100px;"></div>
				
				<div class="yuan yuan1" v-drag2 v-show="switchBorder"></div>
				<div class="yuan yuan2" v-drag2 v-show="switchBorder"></div>
				<div class="yuan yuan3" v-drag2 v-show="switchBorder"></div>
				<div class="yuan yuan4" v-drag2 v-show="switchBorder"></div>
				<div class="yuan yuan5" v-drag2 v-show="switchBorder"></div>
			</div>
		</div>
	</body>
	
	<script src="./main.js"></script>
</html>
